<template>
	<view>
		<view class="jianhuo">
			<input type="search" placeholder="输入订单编号" class="search" v-model="keyword" @input="search">
			<view class="status">
				<view :class="statusIndex == 0?'statusActive':''" @click="statusActive(0)">待拣货
				</view>
				<view :class="statusIndex == 1?'statusActive':''" @click="statusActive(1)">拣货中
				</view>
				<view :class="statusIndex == 2?'statusActive':''" @click="statusActive(2)">已完成
				</view>
			</view>

			<!-- 对应状态显示的内容 -->
			<!-- 未拣货 -->
			<view class="statusCont" v-if="statusIndex == 0">
				<view class="contList">
					<view class="list" v-for="(item,index) in list" :key="index">
						<view class="listLeft">
							<view class="">
								<text>订单号:</text>
								<text>{{item.orderId}}</text>
							</view>
							<view class="">
								<text>操作人:</text>
								<text>{{item.cstatus == 0?"--":""}}</text>
							</view>
							<view class="">
								<text>订单地址:</text>
								<text>{{item.userAddress}}</text>
							</view>

						</view>
						<view class="listRight">
							<view>
								<text>订单状态:</text>
								<text id="nowStatus"
									:style="item.cstatus == 0?'color:#F56C6C':(item.cstatus == 1?'color:#E6A23C':(item.cstatus == 2?'color:#67C23A':''))">{{item.cstatus==0?'未拣货':(item.cstatus == 1?'拣货中':(item.cstatus==2?'已完成':''))}}</text>
							</view>
							<view>
								<text>购买时间:</text>
								<text>{{item.createTime}}</text>
							</view>
							<button @click="go(index)">
								<image src="/static/images/分配量 1.png" mode=""></image>
								<text>去拣货</text>
							</button>
						</view>
					</view>
					<view class="tips">下拉刷新~</view>
				</view>
			</view>
			<!-- 拣货中 -->
			<view class="statusCont" v-if="statusIndex == 1">
				<view class="contList">
					<view class="list" v-for="(item,index) in list" :key="index">
						<view class="listLeft">
							<view class="">
								<text>订单号:</text>
								<text>{{item.orderId}}</text>
							</view>
							<view class="">
								<text>操作人:</text>
								<text>{{item.operator}}</text>
							</view>
							<view class="">
								<text>订单地址:</text>
								<text>{{item.userAddress}}</text>
							</view>
						</view>
						<view class="listRight">
							<view>
								<text>订单状态:</text>
								<text id="nowStatus"
									:style="item.cstatus == 0?'color:#F56C6C':(item.cstatus == 1?'color:#E6A23C':(item.cstatus == 2?'color:#67C23A':''))">{{item.cstatus==0?'未拣货':(item.cstatus == 1?'拣货中':(item.cstatus==2?'已完成':''))}}</text>
							</view>
							<view>
								<text>购买时间:</text>
								<text>{{item.createTime}}</text>
							</view>
							<button @click="go(index)">
								<image src="/static/images/分配量 1.png" mode=""></image>
								<text>去拣货</text>
							</button>
						</view>
					</view>
					<view class="tips">下拉刷新~</view>
				</view>
			</view>
			<!-- 已完成 -->
			<view class="statusCont" v-if="statusIndex == 2">
				<view class="contList">
					<view class="list" v-for="(item,index) in list" :key="index">
						<view class="listLeft">
							<view class="">
								<text>订单号:</text>
								<text>{{item.orderId}}</text>
							</view>
							<view class="">
								<text>操作人:</text>
								<text>{{item.operator}}</text>
							</view>
							<view class="">
								<text>订单地址:</text>
								<text>{{item.userAddress}}</text>
							</view>

						</view>
						<view class="listRight">
							<view>
								<text>订单状态:</text>
								<text id="nowStatus"
									:style="item.cstatus == 0?'color:#F56C6C':(item.cstatus == 1?'color:#E6A23C':(item.cstatus == 2?'color:#67C23A':''))">{{item.cstatus==0?'未拣货':(item.cstatus == 1?'拣货中':(item.cstatus==2?'已完成':''))}}</text>
							</view>
							<view>
								<text>购买时间:</text>
								<text>{{item.createTime}}</text>
							</view>
						</view>
					</view>
					<view class="tips">下拉刷新~</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusIndex: 0,
				status: 0,
				// 订单列表
				list: [],
				page: {
					tolal: '',
					pageSize: 5,
					pageNum: 1
				},
				keyword: '',
			}
		},
		onShow() {
			this.getData1()
		},
		methods: {
			// 拣货操作中的tab切换
			statusActive(index) {
				this.statusIndex = index
				this.status = index
				this.getData1()
			},
			// 拣货订单列表
			getData1() {
				this.$requestPostMethod(this.$serverData.baseUrl + `/cashier/allOrder`, {
					page: this.page.pageNum,
					pageSize: this.page.pageSize,
					status: this.status
				}).then(res => {
					// console.log(res);
					this.list = res
					// console.log(this.list);
				})
			},
			// 点击去拣货
			go(item) {
				const ordernumber = item.orderId;
				uni.setStorageSync("orderNumber", ordernumber)
				uni.switchTab({
					url: '/pages/detail/detail'
				})
			},
			// 订单编号搜索
			search() {
				this.$requestPostMethod(this.$serverData.baseUrl + `/cashier/allOrder`, {
					orderNumber: this.keyword1
				}).then(res => {
					console.log(res);
					this.list = res
					if (this.list[0].cstatus == 0) {
						this.statusIndex = 0
					} else if (this.list[0].cstatus == 1) {
						this.statusIndex = 1
					} else {
						this.statusIndex = 2
					}
				})
			},
		},
		// 监听页面下拉刷新
		onLoad: function(options) {
			setTimeout(function() {
				console.log('start pulldown');
			}, 1000);
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style lang="scss" scoped>
	.jianhuo {
		padding-bottom: 100rpx;

		.search {
			height: 30rpx;
			margin: 28rpx;
			padding: 15rpx;
			border-radius: 8rpx;
			border: 1px solid #D9DBE0;
			background: #FFF;
			background: url("/static/images/搜索 1.png") no-repeat;
			background-position: 99% 50%;
		}

		.status {
			height: 40rpx;
			margin: 28rpx;
			display: flex;
			border: 1px solid #1684FC;
			background: #FFF;

			view {
				flex: 1;
				text-align: center;
				line-height: 80rpx;
				color: #333;
				font-family: PingFang SC;
				font-size: 18rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 40rpx;
			}

			view:nth-child(1) {
				border-right: 1rpx solid #1684FC;
			}

			view:nth-child(2) {
				border-right: 1rpx solid #1684FC;
			}

			.statusActive {
				color: #FFF;
				font-family: PingFang SC;
				font-size: 18rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 40rpx;
				background: #1684FC;
			}
		}

		.statusCont {
			.contList {
				margin: 28rpx;

				.list {
					display: flex;
					justify-content: space-between;
					margin-bottom: 10rpx;
					padding: 18rpx 0;

					.listLeft {
						margin-left: 24rpx;

						view {
							margin-bottom: 15rpx;
							display: flex;

							text:nth-child(1) {
								display: block;
								width: 70rpx;
								color: #333;
								font-family: PingFang SC;
								font-size: 14rpx;
								font-style: normal;
								font-weight: bold;
								line-height: normal;
							}

							text:nth-child(2) {
								color: #666;
								font-family: PingFang SC;
								font-size: 14rpx;
								font-style: normal;
								font-weight: 400;
								line-height: normal;
								margin-left: 15rpx;
							}
						}
					}

					.listRight {
						margin-right: 28rpx;

						view {
							margin-bottom: 15rpx;
							display: flex;

							text:nth-child(1) {
								display: block;
								width: 70rpx;
								color: #333;
								font-family: PingFang SC;
								font-size: 14rpx;
								font-style: normal;
								font-weight: bold;
								line-height: normal;
							}

							text:nth-child(2) {
								color: #666;
								font-family: PingFang SC;
								font-size: 14rpx;
								font-style: normal;
								font-weight: 400;
								line-height: normal;
								margin-left: 15rpx;
							}

							#nowStatus {
								// color: #F56C6C;
								font-family: PingFang SC;
								font-size: 14rpx;
								font-style: normal;
								font-weight: 400;
								line-height: normal;
							}


						}

						button {
							width: 322rpx;
							height: 30rpx;
							border-radius: 4rpx;
							background: #1684FC;
							text-align: center;
							color: #fff;
							line-height: 30rpx;
							font-size: 14rpx;
							font-family: PingFang SC;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 16rpx;
								height: 16rpx;
								margin-right: 4rpx;
							}
						}

						button:active {
							background: #0066ff;
						}
					}

				}

				.tips {
					width: 100rpx;
					color: #666;
					font-family: PingFang SC;
					font-size: 18rpx;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					margin: 40rpx auto;
				}
			}

		}

	}

	.bottom {
		width: 100%;
		height: 60rpx;
		display: flex;
		position: fixed;
		bottom: 0;
		right: 0;
		background: #fff;

		view {
			flex: 1;
			border: 1rpx solid #1684FC;
			color: #333;
			text-align: center;
			font-family: PingFang SC;
			font-size: 18rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 60rpx;
		}

		view:nth-child(1) {
			border-right: none;
		}

		view:nth-child(2) {
			border-right: none;
		}

		.bottomActive {
			background: #1684FC;
			color: #FFF;
			text-align: center;
			font-family: PingFang SC;
			font-size: 18rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 60rpx;
		}
	}
</style>